<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .left a {
            color: #a0a0a0;
        }
        
        header {
            background-color: #323232;
        }
        
        body {
            background-color: #f0f1f1;
        }
        
        .head-con {
            height: 50px;
            width: 1115px;
            margin: auto;
            line-height: 50px;
            color: #a0a0a0;
            font-size: 14px;
            text-align: center;
        }
        
        .head-con .left {
            width: 487px;
            height: 50px;
            float: left;
            margin-left: 45px;
            display: flex;
            justify-content: space-between;
        }
        
        .head-con .left li {
            width: 88px;
        }
        
        .head-con li {
            float: left;
        }
        
        .head-con .left li:hover {
            background-color: #dd4012;
            color: #ffffff;
            cursor: pointer;
        }
        
        .head-con .right {
            width: 300px;
            height: 50px;
            float: right;
            display: flex;
            justify-content: space-evenly;
        }
        
        footer {
            background-color: #323232;
        }
        
        .footer-con {
            width: 1115px;
            height: 80px;
            margin: auto;
        }
        
        .footer-con img {
            margin-top: 20px;
        }
        
        .footer-con .ul1 {
            width: 376px;
            color: #999;
            font-size: 12px;
            float: right;
            margin-top: 25px;
        }
        
        .footer-con ul {
            display: flex;
            justify-content: space-between;
        }
        
        .footer-con li {
            float: left;
        }
        
        .footer-con .ul2 {
            width: 610px;
            color: #666;
            font-size: 12px;
            float: right;
        }
        
        main {
            width: 1100px;
            background-color: #ffffff;
            margin: auto;
            margin-top: 105px;
            box-sizing: border-box;
            padding: 60px 55px;
            margin-bottom: 35px;
        }
        
        #temp {
            display: none;
        }
        
        main h4 {
            font-size: 22px;
            margin-bottom: 15px;
        }
        
        main .p1 {
            /* width: 885px; */
            height: 55px;
            font-size: 12px;
            color: #666666;
            background-color: #bdbbbb;
            margin-bottom: 25px;
            padding: 15px;
            line-height: 25px;
        }
        
        main .tag {
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        main .txt {
            font-size: 12px;
            line-height: 25px;
            color: #7d7d7d;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <header>
        <div class="head-con">
            <img src="img/index-cy.png" alt="" style="float: left;">
            <ul class="left">
                <a href="index.html">
                    <li>网站首页</li>
                </a>

                <li>传悦资源</li>
                <a href="anli-list.html">
                    <li>传悦案例</li>
                </a>
                <li>传悦服务</li>

                <a href="fangan-list.html">
                    <li>解决服务</li>
                </a>
                <li>需求提交</li>
            </ul>
            <ul class="right">
                <li><img src="img/index-phone.png" alt=""></li>
                <li>
                    <p>0535-60652189</p>
                </li>
                <li><img src="img/love_03.jpg" alt=""></li>
                <li><img src="img/love_05.jpg" alt=""></li>
                <li><img src="img/love_07.jpg" alt=""></li>
                <li><img src="img/love_09.png" alt=""></li>
            </ul>
        </div>
    </header>

    <main>
        <div id="temp">
            <h4></h4>
            <p class="p1">
            </p>
            <img src="" alt="" style="margin-bottom: 30px;" class="img1">
            <h2 class="tag"></h2>
            <h5 class="txt"></h5>
        </div>



    </main>


    <footer>
        <div class="footer-con">
            <img src="img/logo-dm_03.jpg" alt="">
            <ul class="ul1">
                <li>关于传悦</li>
                <li>新闻动态</li>
                <li>传悦观点</li>
                <li>联系传悦</li>
                <li>传悦观点</li>
                <li>联系传悦</li>
            </ul>
            <ul class="ul2">
                <li>Copyright &2013</li>
                <li>创梦网络科技责任有限公司</li>
                <li>||</li>
                <li>传悦 Chnyoo.cn ALL Rights Reserved</li>
                <li>京ICP备12005221号</li>
            </ul>
        </div>
    </footer>
</body>

</html>
<script>
    let http = new XMLHttpRequest();
    // 读取数据库中数据
    http.open("get", "http://10.35.164.119:81/anli" + location.search)
    http.send()
    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            let anlist = JSON.parse(http.responseText)

            anlist.forEach(function(item) {
                // 对数据
                let obox = document.querySelector("#temp")
                obox.id = "";

                obox.querySelector("h4").innerHTML = item.title;
                obox.querySelector(".p1").innerHTML = item.tag;
                obox.querySelector(".img1").src = item.img;
                obox.querySelector(".txt").innerHTML = item.p1;
                obox.id = item.id;
            })
        }
    }
</script>